{% extends 'user-base.html' %}

{% load staticfiles %}

{% block content %}
    <div class="container mycontent" style="padding-top: 70px;">
        <ol class="breadcrumb">
            <li><a href="{% url 'index' %}">首页</a></li>
            <li><a href="{% url 'users:user_info' %}">个人中心</a></li>
            <li class="active">个人资料</li>
        </ol>

        <div class="col-md-3" style="padding-left: 0px;">
            <a href="{% url 'users:user_info' %}" class="list-group-item">
                个人资料
            </a>
            <a href="{% url 'users:user_friend' %}" class="list-group-item">我的厨友</a>
            <a href="{% url 'users:user_kitchen' %}" class="list-group-item active">我的厨房</a>

        </div>
        <div class="col-md-9" style="border: 1px solid #dddddd;padding: 0px;">
            <div class="well" style="margin: 0px;">我的厨房</div>
            <div>
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active"><a href="#home" data-toggle="tab">
                        我的作品</a></li>
                    <li><a href="#ios" data-toggle="tab">我的收藏</a></li>
                    <li><a href="#upload" data-toggle="tab">发布菜单</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="home" style="padding: 20px;">
                        {% for my_menu in my_menus.object_list %}
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="thumbnail" style="height: 100px; width: 100px;">
                                        <a href="{% url 'cookbook:cookbook_detail' my_menu.id %}"><img
                                                src="{{ MEDIA_URL }}{{ my_menu.image }}"
                                        ></a>
                                    </div>
                                </div>
                                <div class="col-lg-10">
                                    <div class="detail">
                                        <h3>
                                            <a href="{% url 'cookbook:cookbook_detail' my_menu.id %}">{{ my_menu.name }}</a>
                                        </h3>
                                        </p>

                                        <p class="subcontent">原料：{{ my_menu.ingredients }}</p>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                        <!---分页--->
                        <div class="pageturn" style="text-align: center">
                            <ul class="pagelist">
                                <div class="pagination">
                                    {% if my_menus.has_previous %}
                                        <li class="long"><a href="?{{ my_menus.previous_page_number.querystring }}"
                                                            class="page">上一页</a></li>
                                    {% endif %}
                                    {% for page in my_menus.pages %}
                                        {% if page %}
                                            {% ifequal page my_menus.number %}
                                                <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                                            {% else %}
                                                <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                                            {% endifequal %}
                                        {% else %}
                                            <li class="none"><a href="">...</a></li>
                                        {% endif %}
                                    {% endfor %}
                                    {% if my_menus.has_next %}
                                        <li class="long"><a href="?{{ my_menus.next_page_number.querystring }}">下一页</a>
                                        </li>
                                    {% endif %}
                                </div>
                            </ul>
                        </div>
                    </div>


                    <div class="tab-pane fade" id="ios" style="padding: 20px;">
                        <div class="tab-pane fade in active" id="home">
                            {% for my_collect in my_favorites %}
                                <div class="row">
                                    <div class="col-lg-2">
                                        <div class="thumbnail" style="height: 100px; width: 100px;">
                                            <a href="{% url 'cookbook:cookbook_detail' my_collect.menu.id %}"><img
                                                    src="{{ MEDIA_URL }}{{ my_collect.menu.image }}"
                                            ></a>
                                        </div>
                                    </div>
                                    <div class="col-lg-10">
                                        <div class="detail">
                                            <h3>
                                                <a href="{% url 'cookbook:cookbook_detail' my_collect.menu.id %}">{{ my_collect.menu.name }}</a>
                                            </h3>
                                            </p>
                                            <p class="subline"><a href="{% url 'cookbook:user_menu' my_collect.menu.user_id %}">{{ my_collect.menu.user }}</a>
                                            <p class="subcontent">原料：{{ my_collect.menu.ingredients }}</p>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>


                    <div class="tab-pane fade" id="upload" style="padding: 20px;">
                        <div class="tab-pane fade in active" id="home">
                            <form class="form-horizontal" action="{% url 'users:user_kitchen' %}" method="post" enctype="multipart/form-data">
                                <div class="col-md-8">
                                    <div class="form-group" style="padding-left: 40px;">
                                        <label for="inputEmail3" class="col-md-2 control-label">菜名</label>
                                        <div class="col-md-10">
                                            {{ release_form.name }}
                                        </div>
                                    </div>
                                    <div class="form-group" style="padding-left: 40px;">
                                        <label for="inputPassword3" class="col-md-2 control-label">图片</label>
                                        <div class="col-md-10">
                                            {{ release_form.image }}
                                        </div>
                                    </div>
                                    <div class="form-group" style="padding-left: 40px;">
                                        <label for="inputPassword3" class="col-md-2 control-label">类型</label>
                                        <div class="col-md-10">
                                            {{ release_form.menu_type }}
                                        </div>
                                    </div>
                                    <div class="form-group" style="padding-left: 40px;">
                                        <label for="inputPassword3" class="col-md-2 control-label">原料</label>
                                        <div class="col-md-10">
                                            {{ release_form.ingredients }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4" id="imgPreview">

                                </div>
                                <div class="clearfix"></div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-md-2 control-label">制作过程</label>
                                    <div class="col-md-9">
                                        {{ release_form.details }}
                                    </div>
                                </div>
                                {% csrf_token %}
                                <div class="form-group">
                                    <div class="col-md-offset-2 col-md-10">
                                        <button type="submit" class="btn btn-primary">发布</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>


                </div>
                <script>
                    $(function () {
                        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                            // 获取已激活的标签页的名称
                            var activeTab = $(e.target).text();
                            // 获取前一个激活的标签页的名称
                            var previousTab = $(e.relatedTarget).text();
                            $(".active-tab span").html(activeTab);
                            $(".previous-tab span").html(previousTab);
                        });
                    });

                    $(function () {
                        $('#id_image').change(function () {
                            var objUrl = getObjectURL(this.files[0]);
                            if (objUrl) {
                                document.getElementById("imgPreview").innerHTML = "<img id='img1' width='180px' height='180px' src='" + objUrl + "'/>";
                            }
                        });

                        function getObjectURL(file) {
                            var url = null;
                            if (window.createObjectURL != undefined) { // basic
                                url = window.createObjectURL(file);
                            } else if (window.URL != undefined) { // mozilla(firefox)
                                url = window.URL.createObjectURL(file);
                            } else if (window.webkitURL != undefined) { // webkit or chrome
                                url = window.webkitURL.createObjectURL(file);
                            }
                            return url;
                        }

                    });
                </script>

            </div>
        </div>
    </div>
    <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
    <script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>

{% endblock %}